<template>
	<div>
		<van-nav-bar
		  class="refresh_header"	
		  title="我的关注"
		  left-arrow
		  @click-left="onClickLeft"
		>		
			<van-icon name="arrow-left" slot="left" color="#333"  size="20"/>
	    </van-nav-bar>	
	    
	   <div class="noData" v-if="showNoData">
	   	<img src="../../../../../../static/img/lanhu/noData.png" alt="" />
	   </div>	    
	    
	    <div style="margin-top: 44px;">
			<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
			  <van-list
			    v-model="loading"
			    :finished="finished"
			    finished-text="我也是有底线的"
			    @load="onLoad"
			    :immediate-check="false"
			    :style="{minHeight: clientHeight + 'px' }"
			  >			  
			   <div class="wrap" v-for="(item,index) in list" :key="index">			   	
			   	  <div class="left" @click="linkHomePage(item.userId)">
			   	  	<div class="left_img">
			   	  		<img :src="item.avatar" alt="" v-if="item.avatar"/>
			   	  		<img src="../../../../../../static/img/lanhu/45.png" alt="" v-else/>
			   	  	</div>
			   	  	<div class="left_word">
			   	  		<div class="word1">{{item.nickName}}</div>
			   	  		<div class="word2" style="margin-top: 18px;">{{formatTime(item.loginTime)}}在线</div>
			   	  	</div>
			   	  </div>			   	  
			   	  <div class="right">				   	  	  
			   	  	  <img src="../../../../../../static/img/lanhu/64.png" @click="cancelFollow(item,index)" 
			   	  	  	alt="" style="width: 60px;height: 25px;" v-if="item.isShow"/>
			   	  	  <img src="../../../../../../static/img/lanhu/07.png" 
			   	  	  	alt="" style="width: 50px;height: 25px;" v-else @click="addFollow(item,index)"/>
			   	  </div>
			   </div>
			  </van-list>
			</van-pull-refresh> 		
		</div>       

	</div>	
</template>

<script>
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {	
	data() {
       return {
       	  loading: false,    // 是否处于数据加载状态 
	      finished: false,   // 是否处于数据最底部的状态 
	      refreshing: false, // 是否处于下拉刷新状态         
          pageNum:1,         // 当前数据的页码数
          pages:0,           // 储存数据的最大页码数
          list:[],           // 储存数据用
          userId:'',          // 登陆者的用户ID  
          userId2:'',         // 被访问者的用户ID,暂时不用 只能本人进入此页面
          url1:this.$api+'/marketorderservice/api/v1/market/findAttention', // 查出被访问者的关注列表
          url4:this.$api+'/marketorderservice/api/v1/market/attention/addAttention',// 关注操作
          url5:this.$api+'/marketorderservice/api/v1/market/attention/cancelAttention/',// 取消关注          
          showNoData:false
       }
	},
	methods: {
		// 添加关注
		addFollow(item,index){
		  let that=this
          let params={
			  "fuserId": this.userId,
			  "userId":item.userId           	
          }
		  this.$Axios2.Post(this.url4, params).then(function(res) {		  	  
		  	  that.$toast('关注成功')
		  	  that.list[index].isShow=true
		  })			
		},
		// 取消关注
		cancelFollow(item,index){
		  let that=this	  
		  this.$Axios2.Get(this.url5+this.userId+'/'+item.userId).then(function(res) {
		  	 that.list[index].isShow=false
		  	 that.$toast('取关成功')
		  })			
		},		
	   // 时间转化
	   formatTime(str){
	   	  if(str){
	   	  	return this.timeago(str)
	   	  }else{
	   	  	return ''
	   	  }
	   },
	   // 下拉刷新函数	
	   onRefresh() {
		  setTimeout(() => {
	          this.pageNum=1
	          this.list=[]
	          this.getData()	
	          this.finished = false;
	          this.loading=false
			  this.refreshing = false;
		  }, 1000);          
	   },
	   // 上拉加载函数
	   onLoad(){	   	 
		 setTimeout(() => {		 	
	        if (this.refreshing) {
	          this.list = [];
	          this.refreshing = false;
	        }	        
	        this.pageNum++
	        if(this.pageNum>this.pages){this.finished = true;}
	        else{
              this.getData()
	          this.loading = false;	        	
	        }
	      }, 1000);   	
	   },		
       // 获取数据
       getData(){
       	    let that=this
       	    this.$Axios2.postRequest(this.url1,{userId:this.userId},{pageNum:this.pageNum,pageSize:'10'})
		    .then(function(res) {
			  	if(res.data.page.total==0){
			  		that.showNoData=true
			  	}		    	
			  	for(var i=0;i<res.data.page.records.length;i++){
			  		res.data.page.records[i].isShow=true
			  	}
			  	
                that.list=that.list.concat(res.data.page.records)
                that.pages=res.data.page.pages
                
		    })       	
       }
	},
	mixins:[publicFun],	
	mounted() {
	    this.userId=this.$router.currentRoute.query.userId;  
		this.getData()
	}
}	
</script>

<style scoped="" lang="scss">
.wrap{padding: 15px;display: flex;
   .left{
   	display: flex;align-items: center;width: 80%;      
     .left_img{margin-right:10px;width: 55px;height: 55px;img{width: 100%;height: 100%;border-radius: 2px;}}
     .word1{font-size: 15px;font-weight: bold;color: #333;}
     .word2{font-size: 13px;color: #999;}
   }
   .right{flex: 1;display: flex;justify-content: flex-end;align-items: center;}
}
</style>